<template>
  <Zc></Zc>
  <div>
    <div class="toudl">
      <h3>登录</h3>
      <input
        type="text"
        v-model="userId"
        id="userId"
        placeholder="支持QQ号/QQ邮箱登录"
        class="form-control"
      />
      <el-input
        type="password"
        show-password
        v-model="passId"
        id="passID"
        class="form-control"
        placeholder="请输入密码"
        style="margin-bottom: 20px"
      />
      <input type="checkbox" @keyup.enter="Dl()" /><span
        style="font-size: 14px; color: rgb(175, 175, 175); margin-bottom: 20px"
        >已阅读并同意QQ邮箱 <span style="color: black">用户协议</span> 和
        <span style="color: black">隐私政策</span></span
      >
      <el-button :plain="true" type="primary" @click="Dl()"> 登录 </el-button>

      <div class="butt">
        <span class="butt_1">忘记密码？</span
        ><span class="butt_2"
          ><router-link
            :to="{
              path: '/zc',
            }"
            >注册账号</router-link
          ></span
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import "../assets/css/bootstrap.css";
import { ElMessage } from "element-plus";
import Zc from "../views/zc_tou.vue";

const router = useRouter();
const dl = ref({});
const dl_ = ref([{ qq: "", pass: "" }]);
const userId = ref("");
const passId = ref("");

const goApp = () => {
  router.push({ path: `/index/${userId.value}` });
};

/**用户信息*/
const Mail = () => {
  axios.post("http://127.0.0.1:1234/U/search", dl.value).then((response) => {
    dl_.value = response.data;
    console.log(dl_.value);
  });
};
Mail();

const Dl = () => {
  var myObj = JSON.stringify(dl.value);
  console.log(JSON.parse(myObj));
  console.log(dl.value);
  if (
    (dl_.value[0].qq == userId.value && dl_.value[0].pass == passId.value) ||
    (dl_.value[1].qq == userId.value && dl_.value[1].pass == passId.value) ||
    (dl_.value[2].qq == userId.value && dl_.value[2].pass == passId.value) ||
    (dl_.value[3].qq == userId.value && dl_.value[3].pass == passId.value) ||
    (dl_.value[4].qq == userId.value && dl_.value[4].pass == passId.value) ||
    (dl_.value[5].qq == userId.value && dl_.value[5].pass == passId.value)
  ) {
    setTimeout(() => {
      goApp();
    }, 1000);
    ElMessage({
      showClose: true,
      message: "登录成功",
      type: "success",
      center: true,
    });
  } else {
    ElMessage({
      showClose: true,
      message: "账号或密码错误！",
      type: "error",
    });
    console.log("失败");
  }
};
</script>
<style scoped>
* {
  margin: 0 auto;
  padding: 0;
}
a {
  text-decoration: none !important;
}
.ding {
  display: flex;
}
.ding_1,
li {
  display: flex;
  margin-left: 30px;
  align-items: center;
  font-size: 13px;
}
.ding_1 li a {
  color: rgb(131, 131, 131);
}
.ding_1 li a:hover {
  color: rgb(0, 123, 255);
}
.toudl {
  text-align: center;
  width: 350px;
  height: 390px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: white;
  border-radius: 20px;
  padding: 0 30px;
}
.toudl h3 {
  margin: 36px;
  color: lightseagreen;
  text-shadow: 1px 0 #666, 0 1px #ccc, -1px 0 #ccc, 0 -1px #ccc;
}
.toudl input {
  border: none;
  background: rgb(249, 249, 249);
  margin-bottom: 30px;
  padding-left: 20px;
}
.toudl button {
  width: 90%;
  margin-bottom: 26px;
}
.butt .butt_1 {
  float: left;
  width: 30%;
}
.butt .butt_2 {
  float: right;
  width: 30%;
  color: rgb(0, 123, 255);
}
</style>
